<template>
  <div class="my-padding">
    <el-form ref="form" :model="form" label-width="7rem">
      <el-form-item>
        <span slot="label">设备编号<span class="red">*</span></span>
        <el-input v-model="form.deviceCode" type="text" placeholder="请输入设备编号" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备名称</span>
        <el-input v-model="form.deviceName" type="text" placeholder="请输入设备名称"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">规格型号</span>
        <el-input v-model="form.deviceSpec" type="text" placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备价格</span>
        <el-input v-model="form.devicePrice" type="number" placeholder="请输入设备价格(保留两位小数)"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">存放位置编号</span>
        <el-input v-model="form.deviceLoc" type="text" placeholder="请输入存放位置编号"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备描述</span>
        <el-input v-model="form.deviceInfo" type="textarea" placeholder="请输入设备描述"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备状态</span>
        <el-select v-model="form.deviceStatus" placeholder="请选择设备状态"
                   style="width:38%">
          <el-option
            v-for="item in deviceStateList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备分类<span class="red">*</span></span>
        <el-select v-model="form.typeId" placeholder="请选择设备分类"
                   style="width:38%">
          <el-option
            v-for="item in deviceTypeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateDevice">保存</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/deviceInfo";

  export default {
    data() {
      return {
        form: {
          deviceCode: "",
          deviceName: "",
          deviceSpec: "",
          devicePrice: undefined,
          deviceLoc: "",
          deviceInfo: "",
          deviceStatus: "",
          typeId: "",
        },
        deviceStateList: [
          {
            key: "1",
            value: "设备正常",
          },
          {
            key: "2",
            value: "设备故障",
          },
        ],
        deviceTypeList: [],
      };
    },
    created() {
      $.tbTypeList().then(res=>{
        if (res.success){
          this.deviceTypeList=res.data
        }
      })
      this.fetchData()
    },
    methods: {
      fetchData() {
        $.tbDevice({deviceCode: this.$route.query.id}).then(res => {
          if (res.success) {
            // console.log(res.data)
            this.form = res.data
          }
        })
      },
      updateDevice() {
        if (!this.validate()) return;
        $.tbDeviceUpdate({
          deviceCode:this.form.deviceCode,
          deviceName:this.form.deviceName,
          deviceSpec:this.form.deviceSpec,
          devicePrice:this.form.devicePrice,
          deviceLoc:this.form.deviceLoc,
          deviceInfo:this.form.deviceInfo,
          deviceStatus:this.form.deviceStatus,
          typeId:this.form.typeId,
        }).then(response => {
          // console.log(response.data)
          if (response.data == "修改成功") {
            this.$message({
              type: "success",
              message: "修改成功"
            });
            this.$router.replace({
              path: "index",
            });
          }
        });
      },

      validate() {
        let error = "";
        if (this.form.deviceCode == "" || this.form.deviceCode == null) {
          error = "请输入设备编号 \n";
        } else if (this.form.devicePrice != null && !/^(\d+)(.\d{0,2})?$/.test(this.form.devicePrice)) {
          error = "价格请保留两位有效数字\n";
          this.form.devicePrice = undefined
        } else if (this.form.typeId == "" || this.form.typeId == null) {
          error = "请选择设备分类\n";
        }
        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      },

      back() {
        this.$router.replace({
          path: "index",
        })
      },
    }
  };
</script>

<style>
  .red {
    color: red;
    font-size: 1.5rem;
    vertical-align: middle;
  }
</style>
